import React, { useState } from 'react';
import { Card, Row, Col, Button, Space } from 'antd';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';

// 模拟分类销售数据
const categoryData = [
  { name: '微信小程序', value: 40 },
  { name: '鸿蒙API开发', value: 30 },
  { name: 'Web前端课程', value: 30 },
];

const COLORS = ['#3b82f6', '#22c55e', '#eab308'];

const CategorySalesRanking: React.FC = () => {
  const [activeTab, setActiveTab] = useState('品类');

  return (
    <Card size="small" className="category-sales-card" style={{ height: 340 }}>
      <Row gutter={[16, 16]}>
        <Col span={24} style={{ textAlign: 'right', marginTop: 5 }}>
          <Space>
            <Button 
              type={activeTab === '品类' ? 'primary' : 'default'} 
              size="small" 
              onClick={() => setActiveTab('品类')}
            >
              品类
            </Button>
            <Button 
              type={activeTab === '商品' ? 'primary' : 'default'} 
              size="small" 
              onClick={() => setActiveTab('商品')}
            >
              商品
            </Button>
          </Space>
        </Col>
        <Col span={24} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div className="chart-container" style={{ height: 180, width: '100%' }}>
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={categoryData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  outerRadius={70}
                  innerRadius={30}
                  fill="#8884d8"
                  dataKey="value"
                  label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
                >
                  {categoryData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip formatter={(value) => [`${value}%`, '占比']} />
                <Legend 
                  layout="horizontal" 
                  verticalAlign="bottom" 
                  align="center" 
                  iconType="circle"
                  wrapperStyle={{ fontSize: 12, marginTop: 10 }}
                />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </Col>
      </Row>
    </Card>
  );
};

export default CategorySalesRanking;